<template>
  <div class="goods">
    <div class="menu-wrapper">
       <ul>
         <li v-for="(item,index) in goods" class="menu-item">
           <span class="text border-1px">
             <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
             {{item.name}}
           </span>

         </li>
       </ul>
    </div>
    <div class="foods-wrapper">
      <ul >
        <li v-for="(item,index) in goods" class="food-list">
          <h1 class="title">{{item.name}}</h1>
            <ul>
              <li v-for="(food,index) in item.foods" class="food-item">
                <div class="icon">
                    <img width="57" height="57" :src="food.icon">
                </div>
                <div class="content">
                   <h2 class="name">{{food.name}}</h2>
                   <p class="desc">{{food.description}}</p>
                    <div class="extra">
                       <span class="count">月售{{food.sellCount}}份</span>
                       <span>好评率{{food.rating}}%</span>
                    </div>
                    <div class="price">
                      <span class="now">￥{{food.price}}</span>
                      <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                    </div>
                </div>

              </li>
            </ul>


        </li>
      </ul>
    </div>

  </div>
</template>
<script type="text/ecmascript-6">
  import http from '@/utils/http';
  import api from '@/utils/api';
  const ERR_OK = 0;
  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data () {
      return {
        goods: []
      };
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
    },
    mounted: function () {
      this.fetchData();
    },
    methods: {
      fetchData: async function () {
        let params = {
        };
        const res = await http.post(api.goods, params);
        if (res.data.code === ERR_OK) {
          this.goods = res.data.good;
          console.log(this.goods);
        }
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minxin"
   .goods
     display: flex
     position: absolute
     top: 174px
     bottom: 46px
     width: 100%
     overflow: hidden
     .menu-wrapper
       flex: 0 0 80px
       width: 80px
       background: #f3f5f7
       .menu-item
         display: table
         height: 54px
         width: 56px
         line-height: 14px
         .icon
            display: inline-block
            width: 12px
            height: 12px
            margin-right: 2px
            background-size: 12px 12px
            background-repeat: no-repeat
            vertical-align: top
            &.decrease
              bg-image('decrease_3')
            &.discount
              bg-image('discount_3')
            &.guarantee
              bg-image('guarantee_3')
            &.invoice
              bg-image('invoice_3')
            &.special
              bg-image('special_3')
         .text
           display: table-cell
           font-size: 12px
           vertical-align: middle

           width: 56px

     .foods-wrapper
       flex: 1
       .title
         padding-left: 14px
         height: 26px
         line-height: 26px
         border-left: 2px solid #d9dde1
         font-size: 12px
         color: rgb(147,153,159)
         background: #f3f5f7
       .food-item
         display: flex
         margin: 18px
         padding-bottom: 18px
         border-1px(rgba(7,17,27,0.1))
         &:last-child
            border-none()
            margin-bottom: 0
         .icon
           flex: 0 0 57px
           margin-right: 10px
          .content
            flex: 1
            .name
               margin: 2px 0 8px 0
               height: 14px
               line-height: 14px
               font-size: 14px
               color: rgb(7,17,27)
            .desc,.extra
               line-height: 10px
               font-size: 10px
               color: rgb(147,153,159)
            .desc
              margin-bottom: 8px
            .extra
               &.count
                 margin-right: 12px
            .price
               font-width: 700
               line-height: 24px
               .now
                 margin-right: 8px
                 font-size: 14px
                 color: rgb(240,20,20)
               .old
                 text-decoration: line-through
                 font-size: 10px
                 color: rgb(147,153,159)

</style>
